<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      label-width="150px"
      ref="form"
      class="kylin-form"
    >
      <el-form-item :label="$t('configure.configure_item')" prop="configure">
        <virtual-list
          :value="form.configure"
          size="small"
          class="size"
          :multiple="true"
          :list="configures"
          @selectValue="handleSelectConfigure"
          :obj="true"
        ></virtual-list>
      </el-form-item> 
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button class="kylin-button" @click="handleOk">{{
        $t("save")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import { getConfigureItem } from "@/api/config";
import virtualList from "@/components/virtualList";
export default {
  components: {
    virtualList,
  },
  data() {
    return {
      form: {
        name: "",
        standardId: "",
        configure: [],
        ascription: "",
        description: "",
      },
      rules: {
        configure: [
            {
            required: true,
            message: this.$t("configure.normal_require"),
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    handleSelectConfigure(value) {
      this.form.configure = value;
    },
    handleCancel() {
        this.$refs.form.resetFields();
        this.$emit("click");
    },
    handleOk() {
        this.$refs.form.validate((valid) => {
        if (valid) {
        }
      });
    }
  },
  mounted() {
  },
  watch: {
    "form.standardId": function (newValue) {
      getConfigureItem({ standardId: newValue, paged: false }).then((res) => {
        this.configures = res.data.data.results;
      });
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.size {
    width: 100%;
}
</style>